import Vue from 'vue'
import router from '../router'
// 引入 axios 模块
import axios from 'axios'
// 引入 nprogress 模块，用于展示进度条
import NProgress from 'nprogress'
// 引入 nprogress 样式
import 'nprogress/nprogress.css'
// 引入 elementUI 中的 MessageBox 组件
import { MessageBox } from 'element-ui'

// 设置 axios 请求的根路径
axios.defaults.baseURL = 'http://ccvshop.top:8889/api/private/v1'
/*
    注册请求拦截器
*/
axios.interceptors.request.use(config => {
    // 展示进度条
    NProgress.start()
    // 获取 token 发送到请求头中
    config.headers.Authorization = localStorage.getItem('token')
    // 返回 config
    return config
})

/*
    - 注册响应拦截器
        1、响应拦截器的执行先于组件中
        2、响应拦截器中必须 return 响应对象(response)，组件中才能够拿到响应结果
        3、任何组件中使用 axios 请求数据，都会首先执行响应拦截器
*/
axios.interceptors.response.use(async function (response) {
    // 隐藏进度条
    NProgress.done()
    // 获取 msg 和 status
    const { meta: { msg, status } } = response.data
    // 如果返回的状态为400 并且信息为 无效token
    if (status === 400 && msg === '无效token') {
        try {
            await MessageBox.alert('登录过期, 请重新登录', '提示', {
                type: 'warning',
                confirmButtonText: '确定'
            })
            // 跳转到登录界面
            return router.push('login')
        } catch (err) {
            // 跳转到登录界面
            return router.push('login')
        }
    }
    // 验证有token 时，响应数据
    return response
})

// 将 axios 挂载到 Vue 原型上
Vue.prototype.$http = axios
